<template>
    <div class="w">
        <header>
            <div class="logo" @click="goHome">
                <a href="/"><img src="@/assets/images/logo.png" alt=""/></a>
            </div>
        </header>
        <div class="registerarea">
            <h3>登录
                <div class="login">没有账号？去<router-link to="/register" class="style_red">免费注册</router-link></div>
            </h3>
            <div class="reg_form">
                <form action="">
                    <ul>
                        <!-- <li><label for="">手机号：</label> <input type="tel" class="inp">
                            <span class="error"> <i class="error_icon"></i> 手机号码格式不正确，请重新输入 </span></li> -->
                        <!-- <li><label for="">短信验证码：</label> <input type="text" class="inp">
                            <span class="success"> <i class="success_icon"></i> 短信验证码输入正确 </span></li> -->
                        <li><label for="">请输入邮箱：</label> <input type="email" class="inp" v-model="userEmail">
                            <span class="error" v-show="Wrong_Email"> <i class="error_icon" ></i> 该用户不存在 </span></li>
                        <li><label for="">请输入密码：</label> <input type="password" class="inp" v-model="userPassword">
                            <span class="error" v-show="Fail"> <i class="error_icon" ></i> 密码不正确，请重新输入 </span></li>
                    </ul>
                </form>
                <a style="height:100px"><input type="submit" value="进入商城" class="btn" @click="uLogin(userEmail, userPassword)"></a>
            </div>
        </div>
    </div>
</template>
<script>
import {userLogin} from "@/api/api.js"
export default {
    name : "Login",
    data(){
        return{
            userEmail : "",
            userPassword : "",
            Wrong_Email:false,
            Fail: false,
        }
    },
    methods : {
        uLogin : async function(userEmail, userPassword){
            let res = await userLogin(userEmail, userPassword);
            res = res.data;
        

            if (res.UserLoginResult == "Success") {
            this.$router.push("/");

            console.log(res.UserLoginObjectResult);

            //Real Login Method
            this.$store.commit('Login',
            res.UserLoginObjectResult);
            //Real Login Method
            
            this.Fail = false;
            this.Wrong_Email = false;

            this.$message({
              message: '登录成功！',
              type: 'success'
            });
            } else if (res.UserLoginResult == "Fail") {
                this.$message.error("登录失败！请检查账号和密码后重试！");
                this.Fail = true;
            } else if (res.UserLoginResult == "Parameter-Null") {
                this.$message.error("登录失败！ 服务器错误！");
                console.log("未传入参数！");
            } else if (res.UserLoginResult == "Empty") {
                this.$message.error("登录失败！ 服务器错误！");
                console.log("参数值为空！");
            } else if (res.UserLoginResult == "Wrong-Email") {
                this.Wrong_Email = true;
                this.$message.error("登录失败！ 找不到该用户！");
            }
        },
        goHome : function(){
            this.$router.push("/");
        }
        }
}

import "@/assets/css/register.css"
import "@/assets/css/base.css"



</script>

<style>

</style>